<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swoole Chat</title>
<link rel="stylesheet" type="text/css" href="/files/css/jscrollpane1.css" />
<link rel="stylesheet" type="text/css" href="/files/br/blockrain.css" >
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
<script src="/files/br/blockrain.jquery.js" type="text/javascript"></script>
<!-- 拳皇 -->
<link rel="stylesheet" type="text/css" href="/files/game/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="/files/game/css/demo.css" />
<script type="text/javascript">
var exampleSocket = new WebSocket("wss://swoole.org.cn:9502");

console.log(exampleSocket);
exampleSocket.onopen = function (event) {
	exampleSocket.send('<?php echo $userInfo.'_{}_';?>__md9501__');
	console.log(event);	
};

exampleSocket.onmessage = function (event) {
	
	$('#jp-container').append(event.data);
	// div内部追加dom后调节滚动条位置 目的就是直接拉到底
	$('#jp-container').scrollTop($('#jp-container').scrollTop()+3000);
	console.log(event.data);
}
</script>
</head>
<body>
<div class="talk">
	<div class="talk_title"><span>Swoole Chat</span></div>
	<div class="talk_record">
		<div id="jp-container" class="jp-container">
		</div>
	</div>
	<div class="talk_word">
		<input class="add_face" id="facial" type="button" title="获取当前在线用户" 
			onclick="exampleSocket.send('<?php echo $userInfo.'_{}_';?>__md001__')" />
		<input id='content' class="messages emotion" autocomplete="off" value="吐槽" 
			onFocus="if(this.value=='吐槽'){this.value='';}"  onblur="if(this.value==''){this.value='吐槽';}" />
		<input class="talk_send" type="submit"  title="发送" value="Send" 
			onclick="exampleSocket.send('<?php echo $userInfo.'_{}_';?>'+ document.getElementById('content').value );document.getElementById('content').value=''" />
	</div>
</div>

<script>
document.onkeydown=keyDownSearch;  
function keyDownSearch(e) {    
	// 兼容FF和IE和Opera    
	var theEvent = e || window.event;    
	var code = theEvent.keyCode || theEvent.which || theEvent.charCode;    
	if (code == 13 && $("#content").val() != '在这里输入文字' && $('#content').val() != '') {
		$(".talk_send").trigger("click");
    }
}
</script>
</body>
</html>
